<template>
  <div id="mFrom" :style="{ height: 'calc(100vh - 206px)' }">
    <div class="moveDiv" v-show="moveDiv" :style="{ top: downY + 'px', left: downX + 'px' }">{{  moveDivName  }}</div>
    <div class="mFromView">
      <div class="left-board">
        <div class="components-list">
          <!--          <div class="components-item" v-for="data in modelList" @mousedown="addMoveModel($event, data)" @mouseup="stopMoveModel($event)">-->
          <div class="components-item" v-for="data in modelList" @click="stopMoveModel($event, data)">
            <div class="components-body">{{  data.name  }}</div>
          </div>
        </div>
      </div>
      <div class="center-board">
        <div class="center-board-btn">
          <el-button type="primary" :icon="Search" @click="showFormStyle()">预览</el-button>
          <el-button type="disabled" :icon="Search" :disabled="disabled" @click="removeFormStyle">清除</el-button>
        </div>
        <div class="center-board-view">
          <FormControls :form-list="formList" :clickIndex="clickIndex" @gatewayData="getGatewayData" :disabled="disabled"></FormControls>
        </div>
      </div>
      <div class="right-board">
        <el-tabs v-model="activeName" :stretch="true" class="demo-tabs">
          <el-tab-pane label="组件属性" name="first">
            <div style="box-sizing: border-box;padding: 10px">
              <div v-if="formStyle.type === 'input' && formStyle">
                <el-form :model="formStyle" label-width="120px" :disabled="disabled" label-position="top">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="占位提示">
                    <el-input v-model="formStyle.placeholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="最大输入长度">
                    <el-input v-model="formStyle.maxlength" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否显示输入字数统计">
                    <el-switch v-model="formStyle.showWordLimit" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'textarea' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="占位提示">
                    <el-input v-model="formStyle.placeholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="最大输入长度">
                    <el-input v-model="formStyle.maxlength" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否显示输入字数统计">
                    <el-switch v-model="formStyle.showWordLimit" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="高度是否自适应">
                    <el-switch v-model="formStyle.autosize" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'numberInput' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'select' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="占位提示">
                    <el-input v-model="formStyle.placeholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="数据来源">
                    <el-radio-group v-model="formStyle.dataSources" class="ml-4">
                      <el-radio label="customize" size="large">自定义</el-radio>
                      <el-radio label="interface" size="large" disabled>字典</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="自定义数据" v-if="formStyle.dataSources === 'customize'">
                    <el-table :data="formStyle.customizeData" style="width: 100%">
                      <el-table-column prop="label" label="label">
                        <template #default="scope">
                          <el-input v-model="scope.row.label" @change="upDateFormStyle" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="value" label="value">
                        <template #default="scope">
                          <el-input v-model="scope.row.value" @change="upDateFormStyle" />
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template #default="scope">
                          <el-icon @click="addRow()"
                                   style="margin-right: 10px; color: #00a1a1;font-size: 18px; cursor: pointer">
                            <CirclePlusFilled />
                          </el-icon>
                          <el-icon v-if="scope.$index !== 0" @click="delRow(scope.$index)"
                                   style="color: red; font-size: 18px; cursor: pointer">
                            <CircleCloseFilled />
                          </el-icon>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="字典数据" v-if="formStyle.dataSources === 'interface'">
                    <el-switch v-model="formStyle.autosize" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否可以搜索">
                    <el-switch v-model="formStyle.filterable" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否可以清除">
                    <el-switch v-model="formStyle.clearable" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'radio' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="数据来源">
                    <el-radio-group v-model="formStyle.dataSources" class="ml-4">
                      <el-radio label="customize" size="large">自定义</el-radio>
                      <el-radio label="interface" size="large" disabled>字典</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="自定义数据" v-if="formStyle.dataSources === 'customize'">
                    <el-table :data="formStyle.customizeData" style="width: 100%">
                      <el-table-column prop="label" label="label">
                        <template #default="scope">
                          <el-input v-model="scope.row.label" @change="upDateFormStyle" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="value" label="value">
                        <template #default="scope">
                          <el-input v-model="scope.row.value" @change="upDateFormStyle" />
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template #default="scope">
                          <el-icon @click="addRow()"
                                   style="margin-right: 10px; color: #00a1a1;font-size: 18px; cursor: pointer">
                            <CirclePlusFilled />
                          </el-icon>
                          <el-icon v-if="scope.$index !== 0" @click="delRow(scope.$index)"
                                   style="color: red; font-size: 18px; cursor: pointer">
                            <CircleCloseFilled />
                          </el-icon>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="字典数据" v-if="formStyle.dataSources === 'interface'">
                    <el-switch v-model="formStyle.autosize" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'checkbox' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="最少选择数">
                    <el-input v-model="formStyle.min" type="number" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="最多选择数">
                    <el-input v-model="formStyle.max" type="number" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="数据来源">
                    <el-radio-group v-model="formStyle.dataSources" class="ml-4">
                      <el-radio label="customize" size="large">自定义</el-radio>
                      <el-radio label="interface" size="large" disabled>字典</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="自定义数据" v-if="formStyle.dataSources === 'customize'">
                    <el-table :data="formStyle.customizeData" style="width: 100%">
                      <el-table-column prop="label" label="label">
                        <template #default="scope">
                          <el-input v-model="scope.row.label" @change="upDateFormStyle" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="value" label="value">
                        <template #default="scope">
                          <el-input v-model="scope.row.value" @change="upDateFormStyle" />
                        </template>
                      </el-table-column>
                      <el-table-column>
                        <template #default="scope">
                          <el-icon @click="addRow()"
                                   style="margin-right: 10px; color: #00a1a1;font-size: 18px; cursor: pointer">
                            <CirclePlusFilled />
                          </el-icon>
                          <el-icon v-if="scope.$index !== 0" @click="delRow(scope.$index)"
                                   style="color: red; font-size: 18px; cursor: pointer">
                            <CircleCloseFilled />
                          </el-icon>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="字典数据" v-if="formStyle.dataSources === 'interface'">
                    <el-switch v-model="formStyle.autosize" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'switchBox' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="开启显示的文字">
                    <el-input v-model="formStyle.activeText" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="关闭显示的文字">
                    <el-input v-model="formStyle.inactiveText" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="开启时显示的颜色">
                    <el-color-picker v-model="formStyle.activeColor" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="关闭时显示的颜色">
                    <el-color-picker v-model="formStyle.inactiveColor" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="开启时的值">
                    <el-input v-model="formStyle.activeValue" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="关闭时的值">
                    <el-input v-model="formStyle.inactiveValue" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'sliderBox' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="最小值">
                    <el-input v-model="formStyle.min" type="number" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="最大值">
                    <el-input v-model="formStyle.max" type="number" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="每次拖动范围">
                    <el-input v-model="formStyle.step" type="number" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否显示提示">
                    <el-switch v-model="formStyle.showTooltip" @change="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'monthDatePicker' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="占位提示">
                    <el-input v-model="formStyle.placeholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="显示格式">
                    <el-select v-model="formStyle.showValueType" placeholder="请选择" size="large"
                               @change="upDateFormStyle">
                      <el-option label="202207" value="YYYYMM" />
                      <el-option label="2022-07" value="YYYY-MM" />
                      <el-option label="2022/07" value="YYYY/MM" />
                      <el-option label="07/2022" value="MM/YYYY" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="传参格式">
                    <el-select v-model="formStyle.valueType" placeholder="请选择" size="large" @change="upDateFormStyle">
                      <el-option label="202207" value="YYYYMM" />
                      <el-option label="2022-07" value="YYYY-MM" />
                      <el-option label="2022/07" value="YYYY/MM" />
                      <el-option label="07/2022" value="MM/YYYY" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'datePicker' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数名称">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="占位提示">
                    <el-input v-model="formStyle.placeholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="显示格式">
                    <el-select v-model="formStyle.showValueType" placeholder="请选择" size="large"
                               @change="upDateFormStyle">
                      <el-option label="202207" value="YYYYMM" />
                      <el-option label="2022-07" value="YYYY-MM" />
                      <el-option label="2022/07" value="YYYY/MM" />
                      <el-option label="07/2022" value="MM/YYYY" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="传参格式">
                    <el-select v-model="formStyle.valueType" placeholder="请选择" size="large" @change="upDateFormStyle">
                      <el-option label="202207" value="YYYYMM" />
                      <el-option label="2022-07" value="YYYY-MM" />
                      <el-option label="2022/07" value="YYYY/MM" />
                      <el-option label="07/2022" value="MM/YYYY" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'daterangePicker' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第一个日期参数">
                    <el-input v-model="formStyle.startTimeValueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第二个个日期参数">
                    <el-input v-model="formStyle.endTimeValueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="中间提示">
                    <el-input v-model="formStyle.rangeSeparator" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第一个日期占位提示">
                    <el-input v-model="formStyle.startPlaceholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第二个日期占位提示">
                    <el-input v-model="formStyle.endPlaceholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="显示格式">
                    <el-select v-model="formStyle.showValueType" placeholder="请选择" size="large"
                               @change="upDateFormStyle">
                      <el-option label="20220702" value="YYYYMMDD" />
                      <el-option label="2022-07-02" value="YYYY-MM-DD" />
                      <el-option label="2022/07/02" value="YYYY/MM/DD" />
                      <el-option label="02/07/2022" value="DD/MM/YYYY" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'rateBox' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'timePicker' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="占位提示">
                    <el-input v-model="formStyle.placeholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'datetimePicker' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第一个日期参数">
                    <el-input v-model="formStyle.startTimeValueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第二个个日期参数">
                    <el-input v-model="formStyle.endTimeValueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="中间提示">
                    <el-input v-model="formStyle.rangeSeparator" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第一个日期占位提示">
                    <el-input v-model="formStyle.startPlaceholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="第二个日期占位提示">
                    <el-input v-model="formStyle.endPlaceholder" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="显示格式">
                    <el-select v-model="formStyle.showValueType" placeholder="请选择" size="large"
                               @change="upDateFormStyle">
                      <el-option label="20220702 00:00:00" value="YYYYMMDD hh:mm:ss" />
                      <el-option label="2022-07-02 00:00:00" value="YYYY-MM-DD hh:mm:ss" />
                      <el-option label="2022/07/02 00:00:00" value="YYYY/MM/DD hh:mm:ss" />
                      <el-option label="02/07/2022 00:00:00" value="DD/MM/YYYY hh:mm:ss" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
              <div v-if="formStyle.type === 'uploadBox' && formStyle">
                <el-form :model="formStyle" label-width="120px" label-position="top" :disabled="disabled">
                  <el-form-item label="标题">
                    <el-input v-model="formStyle.name" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="参数">
                    <el-input v-model="formStyle.valueName" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否多选">
                    <el-switch v-model="formStyle.multiple" @change="setUpLoad" />
                  </el-form-item>
                  <el-form-item label="每次可选择数量" v-if="formStyle.multiple">
                    <el-input v-model="formStyle.limit" minlength="1" type="number" maxlength="9" @blur="upDateFormStyle" />
                  </el-form-item>
                  <el-form-item label="是否必填">
                    <el-switch v-model="formStyle.required" @change="upDateFormStyle" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="表单属性" name="second">
            <div style="box-sizing: border-box;padding: 10px">
              <el-form :model="form" label-width="120px" label-position="top" :disabled="disabled">
                <el-form-item label="表单名">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="表单预览">
      <formControlsForView formStatus="edit" :form-list="showFormList" ref="ftfv"></formControlsForView>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="consoleData()" :disabled="disabled">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog :destroy-on-close="true" v-model="showData" title="提交数据">
      <div class="" v-for="data in showFormList">
        {{  data.valueName  }}: {{  data[data.valueName]  }}
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="mForm">
import formControlsForView from '../FormControls/formControlsForView/index'
import { reactive, ref, markRaw, watch } from 'vue'
import FormControls from '../FormControls/index'
const activeName = ref('first')
let moveDiv = ref(false)
const clickIndex = ref(0)
const dialogTableVisible = ref(false)
const modelList = reactive([
  {
    name: '单行输入框',
    componentName: 'singleLineInputBox',
    valueName: 'value',
    type: 'input',
    maxlength: null,
    showWordLimit: false,
    asSummary: false,
    value: null,
    trigger: 'blur',
    placeholder: '请输入',
    required: false,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '多行输入框',
    componentName: 'multiLineInputBox',
    valueName: 'value',
    value: null,
    placeholder: '请输入',
    type: 'textarea',
    trigger: 'blur',
    maxlength: null,
    showWordLimit: false,
    asSummary: false,
    autosize: false,
    min: null,
    max: null,
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '数字输入框',
    componentName: 'numberInputBox',
    valueName: 'value',
    type: 'numberInput',
    placeholder: '请输入',
    value: null,
    trigger: 'blur',
    asSummary: false,
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '下拉选择',
    componentName: 'selection',
    valueName: 'value',
    type: 'select',
    trigger: 'change',
    placeholder: '请输入',
    clearable: false,
    filterable: false,
    asSummary: false,
    required: true,
    value: null,
    dataSources: 'customize',
    interfaceUrl: '',
    cmpType: 'common', // 自定义common、系统custom
    customizeData: [
      {
        label: null,
        value: null
      }
    ]
  },
  {
    name: '单选框组',
    componentName: 'radioBox',
    valueName: 'value',
    textColor: '#ffffff',
    type: 'radio',
    fill: '#409EFF',
    asSummary: false,
    value: null,
    trigger: 'change',
    required: true,
    dataSources: 'customize',
    interfaceUrl: '',
    cmpType: 'common', // 自定义common、系统custom
    customizeData: [
      {
        label: '选项1',
        value: 1
      },
      {
        label: '选项2',
        value: 2
      },
      {
        label: '选项3',
        value: 3
      }
    ]
  },
  {
    name: '多选框组',
    componentName: 'checkbox',
    valueName: 'value',
    textColor: '#ffffff',
    type: 'checkbox',
    asSummary: false,
    min: 1,
    max: 1,
    trigger: 'change',
    value: [],
    required: true,
    dataSources: 'customize',
    interfaceUrl: '',
    cmpType: 'common', // 自定义common、系统custom
    customizeData: [
      {
        label: '选项1',
        value: '1'
      },
      {
        label: '选项2',
        value: '2'
      },
      {
        label: '选项3',
        value: '3'
      }
    ]
  },
  {
    name: '开关',
    componentName: 'switchBox',
    valueName: 'value',
    value: null,
    asSummary: false,
    trigger: 'change',
    type: 'switchBox',
    activeText: null,
    inactiveText: null,
    activeColor: '#00a1a1',
    activeValue: true,
    inactiveValue: false,
    inactiveColor: '#dcdfe6',
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '滑块',
    componentName: 'sliderBox',
    valueName: 'value',
    value: null,
    trigger: 'change',
    type: 'sliderBox',
    asSummary: false,
    step: 1,
    min: 0,
    max: 100,
    vertical: false,
    showTooltip: true,
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '日期选择',
    componentName: 'datePicker',
    placeholder: '请选择',
    valueName: 'value',
    asSummary: false,
    value: null,
    trigger: 'change',
    valueType: 'YYYY-MM',
    showValueType: 'YYYY-MM',
    type: 'datePicker',
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '月份选择',
    componentName: 'monthDatePicker',
    placeholder: '请选择',
    valueName: 'value',
    asSummary: false,
    trigger: 'change',
    value: null,
    valueType: 'YYYY-MM',
    showValueType: 'YYYY-MM',
    type: 'monthDatePicker',
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '日期范围',
    componentName: 'daterangePicker',
    startTimeValueName: 'startTimeValue',
    endTimeValueName: 'endTimeValue',
    startPlaceholder: '请选择',
    endPlaceholder: '请选择',
    asSummary: false,
    rangeSeparator: '至',
    valueName: 'value',
    trigger: 'change',
    value: null,
    valueType: 'YYYY-MM-DD',
    showValueType: 'YYYY-MM-DD',
    type: 'daterangePicker',
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '日期时间',
    componentName: 'timePicker',
    placeholder: '请选择',
    valueName: 'value',
    asSummary: false,
    value: null,
    trigger: 'change',
    valueType: 'YYYY-MM-DD hh:mm:ss',
    showValueType: 'YYYY-MM-DD hh:mm:ss',
    type: 'timePicker',
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '日期时间范围',
    componentName: 'datetimePicker',
    startTimeValueName: 'startTimeValue',
    endTimeValueName: 'endTimeValue',
    startPlaceholder: '请选择',
    endPlaceholder: '请选择',
    rangeSeparator: '至',
    asSummary: false,
    valueName: 'value',
    trigger: 'change',
    value: null,
    valueType: 'YYYY-MM-DD hh:mm:ss',
    showValueType: 'YYYY-MM-DD hh:mm:ss',
    type: 'datetimePicker',
    required: true,
    cmpType: 'common' // 自定义common、系统custom
  },
  {
    name: '评分',
    componentName: 'rateBox',
    type: 'rateBox',
    trigger: 'change',
    cmpType: 'common', // 自定义common、系统custom
    asSummary: false,
    valueName: 'value',
    required: true
  },
  {
    name: '上传文件',
    componentName: 'uploadBox',
    type: 'uploadBox',
    trigger: 'change',
    uploadUrL: ref( '/file-api/upload'), // 上传的图片服务器地址,
    hasData: false,
    asSummary: false,
    cmpType: 'common', // 自定义common、系统custom
    multiple: false,
    limit: 1,
    valueName: 'value',
    required: true
  },
  {
    name: '签名',
    componentName: 'signatureBox',
    type: 'uploadBox',
    cmpType: 'common', // 自定义common、系统custom
    asSummary: false,
    valueName: 'value',
    required: true
  }
])

const showFormList = ref([])
let formData = reactive({})
const formStyle = ref({})
const form = reactive({})
const downX = ref(0)
const downY = ref(0)
const aIndex = ref(0)
const moveDivName = ref(null)
const showData = ref(false)

const props = defineProps({
  formList: {
    type: Object,
    default: () => { },
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:formList'])

if (props.formList, length !== 0) {
  console.log(123123)
}

watch(props, (newProps, oldProps) => {
  console.log('asdasd')
  console.log(newProps.formList.length)
  // aIndex.value = newProps.formList.length
  // if (newProps.formList.length) {
  //   formStyle.value = JSON.parse(JSON.stringify(props.formList[0]))
  // }
})

const addMoveModel = (ev, data) => {
  downX.value = ev.pageX - ev.offsetX
  downY.value = ev.pageY - ev.offsetY
  moveDiv = true
  formData = JSON.parse(JSON.stringify(data))
  moveDivName.value = data.name
}

async function showFormStyle () {
  showFormList.value = JSON.parse(JSON.stringify(props.formList))
  // arr.forEach(item => {
  //   showFormList.push(item)
  // })
  console.log(showFormList)
  dialogTableVisible.value = true
}

// 清除表单
function removeFormStyle () {
  emit('update:formList', [])
}

function getData () {
  console.log(123123)
  return Promise.resolve({ formData: props.formList })
}

defineExpose({
  getData
})

// 执行方法获取参数
const getGatewayData = (e) => {
  clickIndex.value = e
  formStyle.value = JSON.parse(JSON.stringify(props.formList[e]))
  console.log(props.formList)
}

function addRow () {
  formStyle.value.customizeData.push({
    label: null,
    value: null
  })
  props.formList.splice(clickIndex.value, 1, JSON.parse(JSON.stringify(formStyle.value)))
}

function delRow (index) {
  formStyle.value.customizeData.splice(index, 1)
  props.formList.splice(clickIndex.value, 1, JSON.parse(JSON.stringify(formStyle.value)))
}

const stopMoveModel = (ev, data) => {
  if (props.disabled) return
  formData = JSON.parse(JSON.stringify(data))
  moveDivName.value = data.name
  aIndex.value = props.formList && props.formList.length === 0 ? 0 : props.formList[props.formList.length - 1].index
  aIndex.value += 1
  formData.name = `${formData.name}`
  // formData.name = `${formData.name}${aIndex.value}`
  formData.valueName = `value${aIndex.value}`
  if (formData.componentName === 'uploadBox' || formData.componentName === 'checkbox') {
    formData[`value${aIndex.value}`] = []
  } else {
    formData[`value${aIndex.value}`] = null
  }

  props.formList.push({
    ...formData,
    index: aIndex.value
  })
  clickIndex.value = props.formList.length - 1
  formStyle.value = JSON.parse(JSON.stringify(props.formList[props.formList.length - 1]))
  moveDiv = false
}
const ftfv = ref(null)
function consoleData () {
  console.log()
  const data = ftfv.value.backFormData()
  console.log(data.value)
  showData.value = true
}

function upDateFormStyle () {
  props.formList.splice(clickIndex.value, 1, JSON.parse(JSON.stringify(formStyle.value)))
  // formList[clickIndex.value].value =
  console.log(JSON.parse(JSON.stringify(formStyle.value)))
  console.log(props.formList)
}

function setUpLoad () {
  upDateFormStyle()
}

</script>

<style scoped lang="scss">
::v-deep .demo-tabs {
  height: calc(100% - 20px);
  overflow: hidden;

  .el-tabs__content {
    height: 100%;
    overflow: auto;
    padding-bottom:30px;
  }
}

#mFrom {
  width: 100%;
  height: 100%;
  position: relative;

  .mFromView {
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    position: relative;

    .left-board,
    .right-board {
      width: 300px;
      flex-basis: 300px;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #D7D9E0;
      user-select: none;
      flex-shrink: 0;
    }

    .center-board {
      flex: 1;
      flex-grow: 1;
      overflow: hidden;
      box-sizing: border-box;
      height: 100%;
      padding: 10px;
      border-top: 1px solid #D7D9E0;
      border-bottom: 1px solid #D7D9E0;

      .center-board-btn {
        width: 100%;
        height: 80px;
        text-align: right;
      }

      .center-board-view {
        width: 100%;
        overflow: auto;
        height: calc(100% - 80px);
      }
    }

    .components-list {
      font-size: 0;
      box-sizing: border-box;
      height: 100%;
      padding-top: 10px;
      padding-bottom: 10px;

      .components-item {
        display: inline-block;
        width: 46%;
        margin: 2%;
        transition: transform 0ms !important;
      }
    }

    .components-body {
      font-size: 12px;
      line-height: 18px;
      padding: 8px 18px;
      cursor: move;
      border: 1px solid #D7D9E0;
      border-radius: 4px;
      background: #FFF;

      .svg-icon {
        font-size: 15px;
        color: #777;
      }

      &:hover {
        color: #148FFF;
        border: 1px dashed #148FFF;

        .svg-icon {
          color: #148FFF;
        }
      }
    }
  }

  .moveDiv {
    width: 137px;
    height: 36px;
    cursor: move;
    border-radius: 4px;
    background: #FFF;
    font-size: 12px;
    line-height: 18px;
    padding: 8px 18px;
    color: #148FFF;
    position: fixed;
    z-index: 10;
    border: 1px dashed #148FFF;
  }
}
</style>
